<template>
  <div>





    <el-menu router style="border: none"  :default-active="$route.path">
      <el-menu-item index="/">
        <template slot="title">
          <i class=" el-icon-house"></i>
          <span>系统首页</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/element">Element页面</el-menu-item>
      <el-menu-item>系统首页</el-menu-item>
      <el-submenu>
        <template slot="title">
          <i class=" el-icon-menu"></i>
          <span>信息管理</span>
        </template>
        <el-menu-item>用户信息</el-menu-item>
      </el-submenu>
    </el-menu>




    <!--    <el-row>-->
    <!--      <el-col :span="6">-->
    <!--        <div style="width: 100%;height: 300px;background-color: dodgerblue"></div>-->
    <!--      </el-col>-->
    <!--      <el-col :span="6">-->
    <!--        <div style="width: 100%;height: 300px;background-color:red"></div>-->
    <!--      </el-col>-->
    <!--    </el-row>-->
    <el-row>
      <el-col :span="6">
        <div style="padding: 10px;border: 1px solid #ccc ; text-align: center">
          <img style="width: 80%" src="@/assets/logo2.png" alt="">
          <div style="text-align: center">我是1号！</div>
          <div style="color: red">价格 999$</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="padding: 10px;border: 1px solid #ccc ; text-align: center">
          <img style="width: 80%" src="@/assets/logo2.png" alt="">
          <div style="text-align: center">我是2号！</div>
          <div style="color: red">价格 999$</div>

        </div>
      </el-col>
      <el-col :span="6">
        <div style="padding: 10px;border: 1px solid #ccc ; text-align: center">
          <img style="width: 80%" src="@/assets/logo2.png" alt="">
          <div style="text-align: center">我是3号！</div>
          <div style="color: red">价格 999$</div>

        </div>
      </el-col>
      <el-col :span="6">
        <div style="padding: 10px;border: 1px solid #ccc ; text-align: center">
          <img style="width: 80%" src="@/assets/logo2.png" alt="">
          <div style="text-align: center">我是4号！</div>
          <div style="color: red">价格 999$</div>

        </div>
      </el-col>

    </el-row>


    <el-row>
      <el-col :span="24">
        <button>ggg</button>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>

        <el-button type="primary" plain>主要按钮</el-button>
        <el-button type="primary" plain>主要按钮</el-button>
        <el-button type="primary" icon="el-icon-edit" circle></el-button>


      </el-col>
    </el-row>

    <el-row style="margin-top: 20px">
      <el-col>

        <el-input style="width: 200px" v-model="value" placeholder="请输入内容"></el-input>
        <el-input type="textarea" style="width: 200px" v-model="value1"></el-input>

        <el-input show-password style="width: 200px" v-model="password" placeholder="请输入密码"></el-input>

        <el-input style="width: 200px" v-model="value2" placeholder="请输入内容" prefix-icon="el-icon-search"></el-input>
        <el-input clearable style="width: 200px" v-model="value2" placeholder="请输入内容" suffix-icon="el-icon-user"></el-input>

        <el-button>搜索</el-button>

      </el-col>
    </el-row>

    <el-row style="margin: 20px 0">
    <el-autocomplete style="width: 300px" placeholder="请输入内容，我来帮你猜一猜" :fetch-suggestions="querySearch"
                     :trigger-on-focus="false" v-model="value3">

    </el-autocomplete>
    </el-row>

    <el-row>
      <el-select v-model="select" @change="changeSelect">
        <el-option value="香蕉"></el-option>
        <el-option value="梨子"></el-option>
        <el-option value="苹果"></el-option>
      </el-select>

        <el-select v-model="select1" @change="changeSelect1">
          <el-option v-for="item in fruits" :key="item.id" :value="item.name"></el-option>
      </el-select>
      <el-select v-model="select2" @change="changeSelectUser" filterable >
        <el-option v-for="item in user" :key="item.card" :label="item.name" :value="item.card"></el-option>
      </el-select>
    </el-row>
  </div>
</template>
<script>


export default {
  name: 'Element',
  data() {
    return {
      value: '',
      value1: '',
      value2: '',
      value3: '',
      select: '',
      select1: '',
      select2: '',
      password:',',
      coffees: [{ value: '1星巴克咖啡' },{ value: '1栖巢咖啡' }, {value: '2瑞幸咖啡'}, {value: '3库迪咖啡'}],
// 值必须带value
      fruits:[
        {name:'苹果',id:1},
        {name:'香蕉',id:2},
        {name:'梨子',id:3},
        {name:'李子',id:4}
      ],
      user:[
        {name:'小明',card : 1214314141342},
        {name:'小佛',card : 256346134515},
        {name:'小撒',card : 364356154316},
        {name:'小发',card : 414351435543445},
      ]
    }
  },
  methods:{
    querySearch(query, cb) {  // callback
      let result =  query ? this.coffees.filter(v => v.value.includes(query)) : this.coffees
      console.log(result)
      cb(result);
    },
    changeSelect(){
      console.log(this.select)
    },
    changeSelect1(){
      console.log(this.select1)
    },
    changeSelectUser(){
      console.log(this.select2)
    }
  }
}
</script>